<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    #include("../../common/include/_css.html")
    <link rel='stylesheet prefetch' href='/static/css/PilotStyle/reset.css'>
    <link rel="stylesheet" type="text/css" href="/static/css/PilotStyle/default.css">
    <link rel="stylesheet" type="text/css" href="/static/css/PilotStyle/styles.css">
    #include("../../common/include/_all_js.html")
    <script src="/static/js/pilotJS/jquery.easing.min.js" type="text/javascript"></script>

    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }

        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
</head>

<body>
#if(flag)
<article class="htmleaf-content">
    <form id="msform" method='post' style="width:1100px;">
        <ul id="progressbar">
            <li class="active">项目主体资料填写</li>
            <li>稳评领导小组资料填写</li>
            <li>文件上传</li>
            <li>自评/委评</li>
        </ul>

        <fieldset>
            <h1 class="fs-title">请填写项目相关资料</h1>
            <div>
                <label for="project.name" style="vertical-align: center;">项目名称</label>
                <input type="text" id="project.name" class="project" name="project.name" style="width:400px;"/>
            </div>

            <div>
                <label for="project.amount" style="padding-top: 5px;">预计金额</label>
                <span>
                <input type="number" id="project.amount" class="project money" name="project.amount"
                       style="width:370px;margin-right:  0px;"/>
                </span>
                <div id="digitsTip"></div>
                <!--<select id="units" name="units"-->
                <!--style='box-sizing: border-box;color: rgb(32, 13, 41);margin-right: 30px;border-radius: 3px;border: 1px solid #bfbfbf;font-family: "Microsoft YaHei", montserrat, serif;font-size: 15px;height: 32px;float:  left;width: 66px;'>-->
                <!--<option value="1">元</option>-->
                <!--<option value="100">百元</option>-->
                <!--<option value="1000">千元</option>-->
                <!--<option value="10000">元</option>-->
                <!--<option value="1000000">百万元</option>-->
                <!--</select>-->
                <span style="box-sizing: border-box;color: rgb(32, 13, 41);margin-right: 29px;border-radius: 3px;font-family: 'Microsoft YaHei', montserrat, serif;font-size: 17px;height: 32px;float:  left;width: 30px;padding-top: 5px;">元</span>
            </div>

            <br><br><br>


            <div>
                <label for="project.managementID">主管部门</label>
                <select id="project.managementID" name="project.managementID" class="project"
                        style="float:left; width: 400px;">
                    <option value="">请选择项目主管部门</option>
                    #for(List : managList)
                    <option value="#(List.id)">#(List.name)</option>
                    #end
                </select>
            </div>

            <div>
                <label for="project.site" style="padding-top: 5px;">项目地址</label>
                <input type="text" id="project.site" class="project" name="project.site"
                       style="float:left;width: 400px;"/>
            </div>

            <br><br><br>

            <div>
                <label for="project.roleName" style="padding-top: 5px;">立项身份</label>
                <select id="project.roleName" class="project" name="project.roleName">
                    <option value="">请选择立项身份</option>
                    #for(List : roleNameList)
                    <option>#(List)</option>
                    #end
                </select>
            </div>

            <div>
                <label for="project.pStepID" style="padding-top: 5px;">项目阶段</label>
                <select id="project.pStepID" class="project" name="project.pStepID">
                    <option value="">请选择项目阶段</option>
                    #for(List : projectStepNameList)
                    <option value="#(List.id)">#(List.name)</option>
                    #end
                </select>
            </div>

            <div>
                <label for="project.paTypeID" style="width: 100px;margin-top: 5px">项目评估类型</label>
                <select id="project.paTypeID" class="project" name="project.paTypeID" style="width: 235px;">
                    <option value="">请选择项目评估类型</option>
                    #for(List : PaTypeNameList)
                    <option value="#(List.id)">#(List.name)</option>
                    #end
                </select>
            </div>

            <div class="layui-form-item">
                <h2 style="margin-top: 70px;">简介</h2>
                <hr class="layui-bg-blue">
                <label for="brief"></label><textarea id="brief" name="project.brief"></textarea>
            </div>

            <input type="button" id="nextPage1" name="next" class="next action-button site-demo-layedit" value="下一步"/>
        </fieldset>

        <fieldset>
            <h1 class="fs-title">请填写领导小组相关资料</h1>
            <div class="layui-form-item" style="margin-left:25%;">
                <div>
                    <label for="LeaderGroup.leader">组长</label>
                    <label for="leaderGroup.leader"></label><input type="text" class="leaderGroup"
                                                                   id="leaderGroup.leader" name="leaderGroup.leader"/>
                </div>

                <div>
                    <label for="LeaderGroup.deputy">副组长</label>
                    <label for="leaderGroup.deputy"></label><input type="text" class="leaderGroup"
                                                                   id="leaderGroup.deputy" name="leaderGroup.deputy"/>
                </div>
            </div>

            <div class="layui-form-item" style="margin-left:25%;">
                <label>组员</label>
                <label for="crew"></label><textarea id="crew" name="leaderGroup.crew" cols="51" rows="6"></textarea>
            </div>
            <input type="button" name="previous" id="previousPage2" class="previous action-button" value="上一步"/>
            <input type="button" name="next" id="nextPage2" class="next action-button " value="下一步"/>
        </fieldset>

        <fieldset>
            <div class="layui-row">
                <table id="dateTable" lay-filter="dateTable"></table>
            </div>
            <script type="text/html" id="barOption">


                #shiroHasPermission('/app/project/fileUploading')
                #[[
                {{#  if(!d.isUpLoad){ }}
                ]]#
                    #[[
                    {{#  if(d.status===1){ }}
                    ]]#
                    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="upload">上传(必上传)</a>
                    #[[
                    {{# } else { }}
                    ]]#
                    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="upload">上传(非必上传)</a>
                    #[[
                    {{#  } }}
                    ]]#
                #[[
                {{# } else if(d.isUpLoad){ }}
                ]]#
                <a class="layui-btn layui-btn-xs " lay-event="upload">√ 已上传</a>
                <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="see">查看</a>
                #[[
                {{#  } }}
                ]]#
                #end
            </script>

            <input type="button" name="previous" id="previousPage3" class="previous action-button" value="上一步"/>
            <input type="button" name="next" id="nextPage3" class="next action-button " value="下一步"/>
        </fieldset>

        <fieldset>
            <h1 class="fs-title">请选择评估方式</h1>
            <input type="button" id="selfAssessment" name="project.assessmentMode" class="submit action-button"
                   value="自评"/>
            <input type="button" id="othersAssessment" name="project.assessmentMode" class="submit action-button"
                   value="委评"/>
            <br>
            <input type="button" name="previous" id="previousPage4" class="previous action-button" value="上一步"/>
        </fieldset>
    </form>
</article>

<script>
    var current_fs, next_fs;
    var left, opacity, scale;
    var animating;
    var projectId = -1, judgeFile = false;
    var paTypeID, fileId;

    layui.use(['layedit', 'table', 'element'], function () {
        /**
         * 操作对象
         */
        var $ = layui.jquery
            , layedit = layui.layedit
            , table = layui.table
            , element = layui.element
            , saveOrUpdate = 1, maxPage = 1, presentPage = 1
            , temp;

        /**
         *  项目名称框鼠标移出事件(重名检测)
         */
        $(function focus() {
            var data = {};
            $("#project\\.name").on({
                blur: function () {
                    data['name'] = $(this).val();
                    $.post('#(ctxPath)/app/project/GetProjectName', {
                        name: data.name
                    }, function (data) {
                        if (data.status === true) {
                            layer.msg("该项目名可用！");
                            temp = 0;
                        } else if (data.status === false) {
                            layer.msg("项目名重复，请重新输入");
                            temp = 1;
                        }
                    });
                }
            });
        });

        /**
         * 富文本编辑器
         */
        var index = layedit.build('brief', {
            height: 150,
            hideTool: ['link', 'unlink', 'face', 'image', 'help']
        });

        /**
         * 文件表格
         */
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , id: 'dateTable'
            , even: true //开启隔行背景
            , size: 'sm' //小尺寸的表格
            , height: 'full-150'    //容器高度
            , contentType: 'application/json; charset=UTF-8'
            , cols: [[                  //标题栏
                {field: 'id', title: '编号', align: 'center', width: 100}
                , {field: 'name', title: '需上传的文件', align: 'center', width: 600}
                , {title: '操作', minWidth: 240, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , method: 'post'
            , request: {
                pageName: 'pageNumber' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //默认采用30
            , loading: true
            , done: function (res, curr, count) {
                var last = $('.layui-table-body').first().height();
                $('.layui-table-body').first().height(last * 0.920);
            }
        });

        /**
         * 文件上传
         */
        table.on('tool(dateTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'upload') {
                layer.open({
                    type: 2,
                    area: ['500px', '300px'],
                    fix: false, //不固定
                    maxmin: false,
                    shadeClose: false,
                    shade: 0.4,
                    title: '上传文件',
                    content: '#(ctxPath)/app/project/fileUploading?id=' + data.id + '&projectId=' + projectId,
                    end: function () {
                        table.reload('dateTable', {
                            url: '#(ctxPath)/app/project/fileTable?id=' + projectId + '&paTypeID=' + paTypeID
                        });
                    }
                });
            } else if (obj.event === 'see') {
                pop_show('查看文件', '#(ctxPath)/util/pdfView?fileID=' + data.fileID, '', '', function () {
                });
            }
        });

        /**
         * 页面1判空
         */
        function notNull() {
            var valueArray = [];
            var flag = true;
            if (!isNaN($('#project.amount').val()))
                flag = false;
            $(".project").each(function (key) {
                valueArray[key] = $(this).val();
                if (valueArray[key] === null || valueArray[key].trim() === '') {
                    flag = false;
                    return false;
                }
            });
            if (layedit.getText(index) === null || layedit.getText(index) === '') {
                flag = false;
            }
            return flag;
        }

        /**
         * 页面2判空
         */
        function notNull_2() {
            var valueArray = [];
            var flag = true;

            $(".leaderGroup").each(function (key) {
                valueArray[key] = $(this).val();
                if (valueArray[key] === null || valueArray[key].trim() === '') {
                    flag = false;
                    return false;
                }
            });
            if ($("#crew").val() === null || $("#crew").val() === '')
                flag = false;
            return flag;
        }

        /**
         * 上一步按钮事件
         */
        $('.previous').click(function () {
            if (this.id === "previousPage2") {
                presentPage = 1;
                if (presentPage < maxPage) saveOrUpdate = 0;
            } else if (this.id === "previousPage3") {
                presentPage = 2;
                if (presentPage < maxPage) saveOrUpdate = 0;
            } else if (this.id === "previousPage4") {
                presentPage = 3;
                if (presentPage < maxPage) saveOrUpdate = 0;
            }
            if (animating)
                return false;
            animating = true;
            current_fs = $(this).parent();
            previous_fs = $(this).parent().prev();
            $('#progressbar').find('li').eq($('fieldset').index(current_fs)).removeClass('active');
            previous_fs.show();
            current_fs.animate({opacity: 0}, {
                step: function (now, mx) {
                    scale = 0.8 + (1 - now) * 0.2;
                    left = (1 - now) * 50 + '%';
                    opacity = 1 - now;
                    current_fs.css({'left': left});
                    previous_fs.css({
                        'transform': 'scale(' + scale + ')',
                        'opacity': opacity
                    });
                },
                duration: 800,
                complete: function () {
                    current_fs.hide();
                    animating = false;
                },
                easing: 'easeInOutBack'
            });
        });

        /**
         * 下一步按钮事件
         */
        $('.next').click(function () {
            var not = true;
            if (this.id === "nextPage1") {
                if (notNull()) {
                    var data = {};
                    not = true;
                    valueArray = [], nameArray = [];
                    paTypeID = $("#project\\.paTypeID").val();
                    if (maxPage < 2) maxPage = 2 , saveOrUpdate = 1;
                    presentPage = 2;
                    data.saveOrUpdate = saveOrUpdate;
                    $(".project").each(function (key) {
                        nameArray[key] = $(this).attr('name');
                        valueArray[key] = $(this).val();
                        data[nameArray[key]] = valueArray[key];
                    });
                    data['project.brief'] = layedit.getContent(index);
                    if (temp === 1) {
                        not = false;
                        layer.msg("项目重名，无法进行下一步！");
                    } else if (saveOrUpdate === 1) {
                        data.projectId = projectId;
                        $.getJSON(
                            "#(ctxPath)/app/project/projectUploading", data,
                            function (res) {
                                projectId = res.projectId;
                            });
                    } else if (saveOrUpdate === 0) {
                        data.projectId = projectId;
                        data.judgeFile = false;
                        $.get("#(ctxPath)/app/project/projectUploading", data);
                    }
                } else {
                    not = false;
                    layer.msg("数据为空或格式不正确！");
                }
                //加载文件列表
                table.reload('dateTable', {
                    url: '#(ctxPath)/app/project/fileTable?paTypeID=' + paTypeID + '&id=' + projectId
                });
            } else if (this.id === "nextPage2") {
                if (notNull_2()) {
                    var data = {};
                    not = true;
                    valueArray = [], nameArray = [];
                    if (maxPage < 3) maxPage = 3, saveOrUpdate = 1;
                    presentPage = 3;
                    data.saveOrUpdate = saveOrUpdate;
                    $(".leaderGroup").each(function (key) {
                        nameArray[key] = $(this).attr('name');
                        valueArray[key] = $(this).val();
                        data[nameArray[key]] = valueArray[key];
                    });
                    data['leaderGroup.crew'] = $("#crew").val();
                    data.projectId = projectId;
                    $.get("#(ctxPath)/app/project/leaderGroupUploading", data);
                }
                else {
                    not = false;
                    layer.msg("数据为空以及格式错误！");
                }
            } else if (this.id === "nextPage3") {
                var data = {}, valueArray = [], nameArray = [];
                data.projectId = projectId;
                data.paTypeID = paTypeID;
                if (maxPage < 4) maxPage = 4 , saveOrUpdate = 1;
                presentPage = 4;
                $.getJSON("#(ctxPath)/app/project/judgeFile", data,
                    function (data) {
                        judgeFile = data.judgeFile;
                        if (judgeFile === true) {
                            layer.msg("您的所有文件都已上传完毕")
                            setTimeout(1000);
                        } else if (judgeFile === false) {
                            layer.msg("您还有部分文件未上传，之后您可以前往“立项中的项目”进行完善")
                            setTimeout(1000);
                        }
                    });
            }
            if (not) {
                if (animating)
                    return false;
                animating = true;
                current_fs = $(this).parent();
                next_fs = $(this).parent().next();
                $('#progressbar').find('li').eq($('fieldset').index(next_fs)).addClass('active');
                next_fs.show();
                current_fs.animate({opacity: 0}, {
                    step: function (now, mx) {
                        scale = 1 - (1 - now) * 0.2;
                        left = now * 50 + '%';
                        opacity = 1 - now;
                        current_fs.css({'transform': 'scale(' + scale + ')'});
                        next_fs.css({
                            'left': left,
                            'opacity': opacity
                        });
                    },
                    duration: 800,
                    complete: function () {
                        current_fs.hide();
                        animating = false;
                    },
                    easing: 'easeInOutBack'
                });
            }

        });

        /**
         * 自评、委评按钮事件
         */
        $('.submit').click(function () {
            var bg = $('<div class="loading-bg"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop loading-ico"></i></div>');
            $('body').prepend(bg);
            $.getJSON("#(ctxPath)/app/project/projectUploading?saveOrUpdate=0&" + $(this).attr('name') + "=" + $(this).val() + '&projectId=' + projectId + '&judgeFile=' + judgeFile,
                function (data) {
                    layer.open({
                        content: '填写提交完毕'
                        , btn: ['查看项目状态', '继续成立新项目']
                        , yes: function (index, layero) {
                            //按钮【按钮一】的回调
                            var ele = parent.$("li.layui-this").children("i");
                            if (data.flag === 0) {
//                                $("dd.layui-this").removeClass("layui-this");
//                                $("dd:contains('项目评估')").addClass("layui-this");
                                parent.addTab('card', "项目评估", "#(ctxPath)/app/project/evaluation");
                            } else if (data.flag === 1) {
                                parent.addTab('card', "审核中的项目", "#(ctxPath)/app/project/toVerfiing");
                            } else if (data.flag === 2) {
                                parent.addTab('card', "立项中的项目", "#(ctxPath)/app/project/toBuildProject");
                            }
                            ele.click();
                        }
                        , btn2: function (index, layero) {
                            //按钮【按钮二】的回调
                            window.location.reload();
                            //return false 开启该代码可禁止点击该按钮关闭
                        }
                        , cancel: function () {
                            //右上角关闭回调
                            return false //开启该代码可禁止点击该按钮关闭
                        }
                    });
                }
            )
        });
    });

    $('.money').on('input propertychange', function () {
        var data = $('.money').val();
        var str = digitsConversion(data);
        var bid = parseInt(Math.random() * 100000);
        $("#digitsTip").html('<div class="docBubble" id="btip' + bid + '"><i class="triangle-t"></i><div class="tl"><div class="inner"><div class="cont"></div></div></div><div class="tr"></div><div class="bl"></div></div>');
        var $btip = $("#btip" + bid);
        var offset, h, w;
        var timer;
        clearInterval(timer);
        offset = $(this).offset();
        h = $(this).height();
        w = $(this).width();
        $(".cont").html(str);
        $(".triangle-t").css('left', 26);
        $btip.css({"left": offset.left - 330, "top": offset.top + h - 60}).show();
    });


    $('.money').live("mousemove", function () {
        clearInterval(window.timer);
        $("#digitsTip").show();
    });

    $('.money').live("mouseout", function () {
        $("#digitsTip").hide();
    });
</script>
#else
<script>
    window.location.href = "#(ctxPath)/util/tip?content=您尚未拥有立项资格&btn1=立即申请资格&url1=#(ctxPath)/app/organization/projectGet&icon=layui-icon-auz&method1=new&title=立项资格申请";
</script>
#end
</body>
</html>